<template>
  <div class="hl-mine">
    <van-cell-group>
      <van-cell>
        <div slot="title" class="hl-mine-title">
          <van-image width="40" height="40" fit="cover" round :src="require('@/assets/headimg.jpg')" />
          <span>{{ $store.state.user.name }}</span>
        </div>
      </van-cell>
      <van-cell title="登录身份" :value="$store.state.user.phone" />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="充值记录" is-link :to="{ name: 'RechargeList' }" />
      <van-cell title="消费统计" is-link :to="{ name: 'Home' }" />
      <van-cell title="订单查看" is-link :to="{ name: 'Order' }" />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="更多" is-link />
    </van-cell-group>

    <div class="hl-mine-outlogin">
      <van-button type="default" round block @click.stop="onOutlogin">退 出</van-button>
    </div>
  </div>
</template>

<script>
import { Cell, CellGroup, Image } from 'vant'
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Image.name]: Image
  },
  methods: {
    onOutlogin() {
      this.$dialog
        .confirm({
          title: '退出登录',
          message: '确认退出登录吗？'
        })
        .then(() => {
          this.$store.commit('DEL_USER')
          this.$router.replace({ name: 'Login' })
        })
    }
  }
}
</script>

<style lang="less" scoped>
.hl-mine {
  /deep/.van-cell-group {
    margin-top: 8px;
  }
  &-title {
    display: flex;
    align-items: center;
    justify-items: center;
    span {
      margin-left: 8px;
    }
  }
  &-outlogin {
    padding: 16px;
  }
}
</style>
